<template>
	<div class="mian-container">
		<div class="message-box">
			<div class="color-block">
				<div v-for="(i, index) in 5" class="main-color" @click="searchByColor"></div>
			</div>
			<div class="message-block">
				<el-tag type="info" @click="search">{{img.size}}</el-tag><br />
				<!-- <div>源站点：<br /><a src="img.src_site">{{img.src_site}}</a></div> -->
				<div class="tags-container" v-if="img.tags">
					<el-tag @click="search" type="info" v-for="(item, index) in img.tags.split(',')" :key="index">{{item}}</el-tag>
				</div>
			</div>
		</div>
		<div class="img-box" @click="closeImgDetail">
			<el-image :src="img.src" fit="contain"></el-image>
		</div>
	</div>
</template>

<script>
export default{
	watch:{
		img: "changeMainColors"
	},
	methods:{
		// 关闭图片详细信息展示
		closeImgDetail(){
			this.$store.commit("changeShowImage");
		},
		// 显示主要颜色
		changeMainColors(){
			let colors = document.querySelectorAll(".main-color");
			if(this.img.colors!==undefined){
				let currentColors = this.img.colors.split(",");
				for(let i=0;i<colors.length;i++){
					colors[i].style.backgroundColor = currentColors[i];
					colors[i].textContent = currentColors[i];
				}
			}
		},
		// 按颜色搜索
		searchByColor(e){
			this.closeImgDetail();
			let color = this.colorHex(e.currentTarget.style.backgroundColor).toUpperCase();
			this.$router.push({path: '/result/'+encodeURI(encodeURI(color.replace(/#/, "23%"))), params:{keyWord: color}});
		},
		// 按标签检索
		search(e){
			this.closeImgDetail();
			this.$router.push({path: '/result/'+encodeURI(encodeURI(e.currentTarget.textContent)), params:{keyWord: e.currentTarget.textContent}});
		},
		// rgb转十六进制
		colorHex(color) {
		  // RGB颜色值的正则
		  var reg = /^(rgb|RGB)/;
		  if (reg.test(color)) {
		    var strHex = "#";
		    // 把RGB的3个数值变成数组
		    var colorArr = color.replace(/(?:\(|\)|rgb|RGB)*/g, "").split(",");
		    // 转成16进制
		    for (var i = 0; i < colorArr.length; i++) {
		      var hex = Number(colorArr[i]).toString(16);
		      if (hex === "0") {
		        hex += hex;
		      }
			  hex = hex.length == 1 ? '0' + hex : hex;
		      strHex += hex;
		    }
		    return strHex;
		  } else {
		    return String(color);
		  }
		}
	},
	computed:{
		img:{
			get(){
				return this.$store.getters.getCurrentImg;
			},
			set(){
				
			}
		}
	}
}
</script>

<style scoped>
	 .mian-container{
		 width: 100%;
		 height: 100vh;
		 border: 1px solid;
		 background-color: rgba(1, 4, 2, 0.8);
		 /* 定位 */
		 position: fixed;
		 top: 0;
		 left: 0;
		 z-index: 150;
		 /* 布局 */
		 display: flex;
		 flex-flow: row wrap;
		 justify-content: center;
		 align-items: center;
	 }
	 .message-box{
		 width: 15%;
		 height: 100%;
		 /* 定位 */
		 position: fixed;
		 left: 0;
		 top: 0;
		 /* 布局 */
		 display: flex;
		 flex-flow: column nowrap;
		 background-color: rgba(5, 16, 10, 0.8);
	 }
	 .color-block{
		 height: 40%;
		 display: flex;
		 flex-flow: column nowrap;
		 justify-content: center;
		 align-items: center;
	 }
	 .message-block{
		 height: 60%;
		 color: white;
	 }
	 .main-color{
		 width: 80%;
		 height: 10%;
		 display: flex;
		 justify-content: center;
		 align-items: center;
	 }
	 .main-color:hover{
		 border: 1px solid #F0F8FF;
		 transform: scale(1.1);
		 transition: 1s transform;
		 cursor: pointer;
	 }
	 .tags-container{
		  display: flex;
		  flex-flow: row wrap;
		  justify-content: center;
		  align-items: center;
	 }
	 .img-box{
		 width: 70%;
		 height: 95%;
	 }
	 .el-tag{
		 cursor: pointer;
	 }
	@keyframes img-animation{
		from{
			transform: scale(0.3);
			opacity: 0.5;
		}
		30%{
			transform: scale(0.4);
			opacity: 0.7;
		}
		50%{
			transform: scale(0.5);
			opacity: 0.9;
		}
		to{
			transform: scale(0.6);
			opacity: 1;
		}
	}
	 .el-image{
		 width: 100%;
		 height: 100%;
		 animation: img-animation 0.2s ease-in-out 0s; 
	 }
	 /* 媒体查询 */
	 @media screen and (max-width:480px) {
	 	.mian-container{
			 /* 布局 */
			 display: flex;
			 flex-flow: column wrap;
			 justify-content: center;
			 align-items: center;
	 	}
		.message-box{
			width: 100%;
			height: 20%;
			overflow: auto;
			/* 定位 */
			position: fixed;
			top: 0;
			/* 布局 */
			display: flex;
			flex-flow: row nowrap;
			justify-content: center;
			align-items: center;
		}
		.img-box{
			margin-top: 20%;
			width: 90%;
		}
		.color-block{
			width: 40%;
			height: 100%;
		}
		.message-block{
			width: 40%;
			color: white;
			display: flex;
			flex-flow: row wrap;
			justify-content: center;
			overflow: auto;
		}
	 }
</style>
